<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style>
        .card-box{
            display: flex;
            margin: 10px;
        }
        img{
            width: 141px;
            height: 80px;
        }
        .title{
            font-size: 14px;
            font-weight: 500;
            height: 36px;
            line-height: 18px;
            margin-bottom: 6px;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .card-box .info {
            margin-left: 10px;
        }
        .card-box .info .count {
            display: inline-block;
            height: 16px;
            width: 100%;
            color:#999;
            font-size: 12px;
        }
    </style>
</head>

<body>
        <div id="demo_x" class="" ></div>
</body>

<!-- 必要 -->
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/render_somthing.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<script>
    {
        var render_somthing_demo_x;
        render_somthing_demo_x = new render_somthing();
        render_somthing_demo_x.init({
            // div的id
            id: "#demo_x",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
<ul style="padding-left:0px;"></ul>
    `
            },
            // 渲染内容的配置
            content: {
                default: `
                <div class="card-box">
                    <div class="pic-box">
                        <div class="pic">
                        <img src="#{img}"/>
                        </div>
                    </div>
                    <div class="info">
                        <a class="title">#{title}</a>
                        <div class="count up">
                            <a >#{author}</a>
                        </div>
                        <div class="count">#{play} 播放&nbsp;·&nbsp;#{count} 弹幕</div>
                    </div>
                </div>
`,
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
               # {title}     - 变量，表示数据数组中对象的key
            */
            condition: [
            ],
        })
        render_somthing_demo_x.render([{
                        img: "https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=cd86988c75d9f2d33f1122ef99ed8a53/3bf33a87e950352a702e82654443fbf2b2118b14.jpg",
                        title: "【懂点儿啥】美国欲绞杀华为 自己的黑料却全被扒光",
                        author:"观察者网",
                        play:"158.1万",
                        count:"2.9万"
                    }, {
                        img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1514842991,532324681&fm=26&gp=0.jpg",
                        title: "【手绘OP】JOJO的奇妙冒险黄金之风OP2！背叛者的镇魂曲（600张爆肝手绘/轻微剧透）",
                        author:"观察者网",
                        play:"158.1万",
                        count:"2.9万"
                    }, {
                        img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1514842991,532324681&fm=26&gp=0.jpg",
                        title: "【手绘OP】JOJO的奇妙冒险黄金之风OP2！背叛者的镇魂曲（600张爆肝手绘/轻微剧透）",
                        author:"观察者网",
                        play:"158.1万",
                        count:"2.9万"
                    }, {
                        img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1514842991,532324681&fm=26&gp=0.jpg",
                        title: "【手绘OP】JOJO的奇妙冒险黄金之风OP2！背叛者的镇魂曲（600张爆肝手绘/轻微剧透）",
                        author:"观察者网",
                        play:"158.1万",
                        count:"2.9万"
                    }, {
                        img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1514842991,532324681&fm=26&gp=0.jpg",
                        title: "【手绘OP】JOJO的奇妙冒险黄金之风OP2！背叛者的镇魂曲（600张爆肝手绘/轻微剧透）",
                        author:"观察者网",
                        play:"158.1万",
                        count:"2.9万"
                    }, {
                        img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1514842991,532324681&fm=26&gp=0.jpg",
                        title: "【手绘OP】JOJO的奇妙冒险黄金之风OP2！背叛者的镇魂曲（600张爆肝手绘/轻微剧透）",
                        author:"观察者网",
                        play:"158.1万",
                        count:"2.9万"
                    }, ]);
    }
</script>

</html>